<template>
    <el-container>
        <el-aside width="260px">
            <el-header class="logo">XXXXXX</el-header>
            <el-menu router :default-active="$route.path" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff">
                <el-sub-menu v-for="pm in menus" :key="pm.id" :index="String(pm.id)">
                    <template #title>
                        <el-icon>
                            <component :is=" icons[pm.id] "></component>
                        </el-icon>
                        <span>{{ pm.authName }}</span>
                    </template>
                    <el-menu-item v-for="cm in pm.children" :key="cm.id"  :index="'/home/'+cm.path">
                        <el-icon>
                            <Menu />
                        </el-icon>
                        <span>{{ cm.authName }}</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>{{ user.username }}</el-header>
            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import { mapState } from "vuex";
import { findLeftMenu } from "@/api/rightApi";
export default {
    name: 'HomeView',
    data() {
        return {
            icons:{
                "201":'Location',
                "125":'Operation'
            },
            menus: [],
        }
    },
    computed: {
        ...mapState(["user"])
    },
    methods: {
        async initMenus() {
            let result = await findLeftMenu();
            if(result===null) return;
            this.menus = result;
        }
    },
    created(){
        this.initMenus();
    }
}
</script>

<style lang="scss" scoped>
.el-container {
    height: 100%;
}

.el-header {
    box-shadow: 6px 0px 6px 0px #999;
}

.el-aside {
    background-color: #545c64;

    .logo {
        box-shadow: -6px 0px 6px 0px #999;
    }
}

.el-menu {
    margin-top: 1px;
    border-right: unset;
}</style>
